<template>
  <div>
    <div class="swiper-container" ref="aa">
      <!-- 爸爸轮播图 -->
      <swiper ref="swiperTop" :options="swiperOptionsTop" class="gallery-top">
        <swiper-slide v-for="item in photoNewArr" :key="item.id">

          <div class="item-box">
            <img :src="item.path" alt="" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="swiper-button-prev"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-son-container">
      <swiper
        ref="swiperThumbs"
        :options="swiperOptionThumbs"
        class="gallery-thumbs"
        style="height: 88px; width: 88px"
      >
        <swiper-slide v-for="item in photoNewArr" :key="item.id" style="height: 88px; width: 88px" >
          <div class="item-son-box">
            <img :src="item.path" alt="" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";
export default {
  name: "carrousel",
  props: {
    photoArr: {
      default: [],
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      swiperOptionsTop: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
     
        effect: "fade",
         loopedSlides: 5, // looped slides should be the same
      },
      swiperOptionThumbs: {
        spaceBetween: 1,
  
        freeMode: true,
        slideToClickedSlide: true,
        watchSlidesVisibility: true,
        touchRatio: 0.2,
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    photoNewArr() {
      return this.photoArr.slice(3);
    },
    num() {
      return this.photoNewArr.length;
    },
  },
  mounted() {
    // 注意这里是要用$swiper取调用这这个节点里面的swiper方法
    const swiperTop = this.$refs.swiperTop.$swiper;
    const swiperThumbs = this.$refs.swiperThumbs.$swiper;
    swiperTop.controller.control = swiperThumbs;
    swiperThumbs.controller.control = swiperTop;
    console.log(swiperTop, swiperThumbs);
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  overflow: visible !important;
  position: relative;
  height: 600px;
  width: 600px;
}
// .swiper-pagination {
//   position: absolute;
//   bottom: 100px;
//   left: 50%;
//   width: 200px;
//   display: flex;
//   justify-content: space-between;
// }
.swiper-button-prev,
.swiper-button-next {
  margin: 0 20px 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.5);
  transition: all 0.5s;
  &::after {
    font-size: 18px;
    color: white;
  }
}
.item-box {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  text-align: center;
  // background-size: contain;
  // background-position: center;
  img {
    width: 98%;
    height: 98%;
  }
}
.swiper-son-container {
  // overflow: visible !important;
  // position: relative;
  height: 100px;
  width: 100px;
}
.item-son-box {
  z-index: 20;
  background-color: pink;
  width: 70px;
  height: 70px;
  img {
    width: 100%;
  }
}
</style>